<template>
  <div class="container">
    <ul class="goods-list">
      <li class="goods-cell" v-for="(item, index) in items" :key="index" @click="itemClicked(item, index)">
        <div class="left">
          <!--放到div里面-->
          <div>
            <van-image
                lazy-load
                :src="item.image"
                alt=""
            >
              <!-- 通过插槽方式 加载中-->
              <template v-slot:loading>
                <!-- 加载菊花 -->
                <van-loading type="spinner" size="20" />
              </template>
              <!-- 通过插槽方式-->
              <template v-slot:error>加载失败</template>
            </van-image>
          </div>
          <div class="goods-info">
            <div class="goods-name">{{item.name}}</div>
            <div class="goods-model">{{item.model}}</div>
            <div class="goods-origin-price">{{item.originPrice}}</div>
            <div class="goods-discount-info">
              <span class="exchange-title">换购价:</span>
              <span class="goods-exchange-price">{{item.exchangePrice}}</span>
              <img class="xl-icon" src="../assets/xl_icon_12x9_red.png" alt="" />
              <span class="exchange-title">+5000积分</span></div>
          </div>
        </div>
        <div class="right">
          <!-- 组合类别写法 多个[] 类名逗号隔开 其他的以对象呈现 对象键值单引号处理 -->
          <div :class="[{'status-btn-s': item.isSelect}, {'status-btn-n': !item.isSelect}, 'status-btn']" @click.stop="statusBtnClicked(index)">选择</div>
        </div>
      </li>
    </ul>
  </div>

</template>

<script>
import { Http } from "@/utils/apiManager";
import { klBusinessStatistics, klGetJobList, klGetSeekStatusList } from "@/utils/urlConfig";
import {showToast} from "vant";

export default {
  name: "ExchangeList",
  components:{

  },
  props:{

  },
  data() {
    /*DOM数据状态管理*/
    return {
      items:[]
    }
  },
  /*界面被创建*/
  created() {

  },
  /*界面加载完成*/
  mounted() {
    this.loadNewData()
  },
  /*自定义方法均在此对象里*/
  methods:{
    loadNewData() {

      // 测试普通post请求
      let param = {
        endDate: '2023-02-02',
        startDate: '2023-02-02',
      }
      Http.post(klBusinessStatistics, Http.appModuleType.moduleTypeVip, param).then((res) => {
        console.log('请求结果：', res)
        const {code, msg} = res;
        if (code == 0) {
          showToast("请求成功")
        } else {
          showToast(msg)
        }
      }).catch(err => {
        console.log('请求失败：', err)
        showToast(err)
      })

      // 测试post - json请求
      param = {
        "pageSize": 20,
        "area": "",
        "city": "武汉市",
        "sortWay": "composite",
        "staffId": "16",
        "expectPostCode": "PR20221222113721749",
        "pageNum": 1
      }
      Http.jsonPost(klGetJobList, Http.appModuleType.moduleTypeRecruit, param).then((res) => {
        console.log('获取职位列表成功', res)
      }).catch((err) => {
        console.log('获取职位列表失败', err)
      })

      param = {
        seekType:1,
        staffId:16
      }
      Http.get(klGetSeekStatusList, Http.appModuleType.moduleTypeRecruit, param).then(res => {
        console.log('获取求职状态成功', res)
      }).then(err => {
        console.log('获取求职状态失败', err)
      })

      let temp0 = {
        image:"https://img2.baidu.com/it/u=2421090168,324781765&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681405200&t=bf6f0d721876a2b433d225f47efe05a6",
        name:"西红柿西红柿西红柿西红柿西红柿西红西红柿西红柿西红柿西红柿西红西红...",
        model:"规格:1斤/份",
        originPrice:'22.98',
        exchangePrice:'16.88',
        isSelect:true
      }

      let temp1 = {
        image:"https://img2.baidu.com/it/u=2421090168,324781765&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681405200&t=bf6f0d721876a2b433d225f47efe05a6",
        name:"西红柿西红柿西红柿西红柿西红柿西红西红柿西红柿西红柿西红柿西红西红...",
        model:"规格:1斤/份",
        originPrice:'22.98',
        exchangePrice:'16.88',
        isSelect:true
      }
      this.items = [temp0, temp1]
    },

    itemClicked(item, index) {
      console.log('当前点击item', item, '索引', index)
    },

    statusBtnClicked(index) {
      let { items } = this
      items[index].isSelect =  !items[index].isSelect
      console.log('item', items)
      if (items[index].isSelect) {
        showToast('选择')
      } else {
        showToast('取消选择')
      }
    }
  }
}
</script>

<style scoped>
body, .container {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #ffffff;
}

ul li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.goods-list {
  margin-block-start: 0;
  padding-inline-start:0;
}

.goods-cell {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  border-bottom: 1px solid #EEEEEE;
}

.left {
  display: flex;
}

.right {
  position: relative;
}

.goods-icon {
  width: 80px;
  height: 80px;
  border-radius: 5px;
}

.goods-info {
  margin-left: 10px;
}

.goods-name {
  color: #0D0D0D;
  font-size: 14px;
  font-weight: 600;
}

.goods-model {
  color: #909090;
  font-size: 12px;
  margin-top: 6px;
}

.goods-origin-price {
  color: #909090;
  font-size: 14px;
  margin-top: 6px;
  /*文字画中间横线*/
  text-decoration: line-through;
}

.goods-discount-info {
  margin-top: 6px;
  display: flex;
}

.exchange-title {
  color: #FF4A20;
  font-size: 13px;
}

.goods-exchange-price {
  font-size: 15px;
  font-weight: 600;
  color: #FF4A20;
}

.xl-icon {
  width: 12px;
  height: 9px;
  margin: auto 0;
}

.status-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 72px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  border-radius: 13px;
  font-size: 12px;
  box-sizing: border-box;
}

.status-btn-n {
  border: 1px solid #707070;
  color: #0D0D0D;
}

.status-btn-s {
  border: 1px solid #FF4A20;
  color: #FF4A20;
}

.van-image {
  width: 80px;
  height: 80px;
  border-radius:5px;
}

</style>
